<template>
    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" v-if="dialogVisible" :show-close="false" :title="title" :close-on-click-modal="false" width="20%">
      <el-card>
        <el-form ref="ruleFormRef" style="max-width: 300px" :model="ruleForm" status-icon :rules="rules"
          label-width="auto" class="demo-ruleForm">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="序号" prop="sort">
            <el-input v-model="ruleForm.sort" />
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="1">药品分类</el-radio>
              <el-radio :label="2">组合分类</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="ruleForm.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item style="margin-left: 100px;">
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            <el-button type="primary" @click="cancel()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,defineProps} from 'vue'
  import type { FormInstance, FormRules } from 'element-plus'
  const props = defineProps({
    onSubmit:Function
  })
  
  const dialogVisible = ref(false)
  const isadd = ref()
  const title = ref('')
  function changeDialogVisible(val: boolean) {
    if (val === true) {
      title.value = "新增分类"
    }
    if (val === false) {
      title.value = "修改分类"
    }
    dialogVisible.value = true
    isadd.value = val;
  }
  import { nextTick } from 'vue';
  function editFormData(row: any) { 
    nextTick(() => {
      ruleForm.id = row.id
      ruleForm.name = row.name
      ruleForm.type = row.type
      ruleForm.sort = row.sort
      ruleForm.status = row.status
    })
     
  }
  defineExpose({
    changeDialogVisible,
    editFormData
  })
  //表单
  const ruleFormRef = ref<FormInstance>()
  
  const ruleForm = reactive({
    id: null,
    name: '',
    type: null,
    status: null,
    sort: null,
  })
  
  const checkSort = (rule: any, value: any, callback: any) => {
    if (value === null || value === '') {
      callback(new Error('请输入序号!'))
    } else if (!/^\d+$/.test(value)) {
      callback(new Error("请输入一个不含小数点的整数!"))
    } else {
      callback()
    }
  }
  
  const rules = reactive<FormRules<typeof ruleForm>>({
    name: [{ required: true, message: '请输入分类名称!', trigger: 'blur' }],
    type: [{ required: true, message: '请设置分类类型!', trigger: 'blur' }],
    status: [{ required: true, message: '请设置分类状态!', trigger: 'blur' }],
    sort: [{ validator: checkSort,  trigger: 'blur' },],
   
  })
  import { addCategory} from '@/apis/category.js'
  import { ElMessage } from 'element-plus'
  
  import { updateCategory } from '@/apis/category.js'
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        if (isadd.value === true) {
          //提交添加请求
          const res = await addCategory(ruleForm)
          console.log(res.data.code);
          if (res.data.code === 0) {
            ElMessage.error(res.data.msg)
            return
          }
          resetForm(formEl)
          ElMessage.success("添加成功")
          dialogVisible.value = false
  
          //刷新表格
          props.onSubmit()
  
          
          console.log('submit!')
        } else {
          //提交 修改请求
          const res = await updateCategory(ruleForm)
          console.log(res.data.code);
          if (res.data.code === 0) {
            ElMessage.error(res.data.msg)
            return
          }
          resetForm(formEl)
          ElMessage.success("修改成功")
          dialogVisible.value = false
          //刷新表格
          props.onSubmit()
        }
      } else {
        console.log('error submit!')
        return false
      }
    })
  }
  function cancel() {
    resetForm(ruleFormRef.value)
    dialogVisible.value = false
  }
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  </script>